<template>
	<view class="pay_container">
		<u-loading-page :loading="isPageLoading" :loading-text="loadingPageText"></u-loading-page>
		<view v-if="!isPageLoading">
			<view class="pay_charenmai" v-show="isshowrenmai">
				<view class="pay_top">
					<view class="pay_top_box">
						<view class="pay_top_name">查人脉</view>
						<view class="pay_top_intro">联系搭建桥梁，沟通决定成败</view>
						<view class="pay_top_number">
							<text class="number"
								v-if="this.userInfo.hyJibie.includes('移动')">{{20 * this.needBuy}}</text>
							<text class="number" v-else>1000</text>
							家
						</view>
					</view>
				</view>
				<view class="pay_price">
					<view class="pay_price_left">
						<text class="text1">¥{{sjprice}}</text>
						<text class="text2" v-show="sjprice !== yuanjia">¥{{yuanjia}}</text>
					</view>
					<view class="pay_price_right" v-if="userInfo.hyJibie.includes('移动')">有效期至{{youxiaoqi}}</view>
					<view class="pay_price_right" v-else>有效期至{{oneYearLater}}</view>
				</view>
				<view class="pay_item">
					<view class="pay_item-title">采招Saas应用</view>
					<view class="pay_item-label">
						<text class="label-btn active">查人脉</text>
					</view>
				</view>
				<!-- 支付方式 -->
				<view class="infor_quanyi" v-if="!baseConfig.isIOSshenhe">
					<view class="payment">
						<radio-group @change="radioChange" class="payment_radio">
							<label class="pay-list-cell pay-list-cell-pd" v-for="(payment, index) in payments"
								:key="payment.value">
								<view>
									<image :src="payment.tupic" class="pay-tupic"></image>
									{{payment.name}}
								</view>
								<view style="margin-left: 20rpx;">
									<radio :value="payment.value" :checked="paymentItem.id == payment.value"
										:type="payment.value" color="#74df63" />
								</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="pay_product" style="padding: 0;">
					<view class="pay_product-top" style="padding: 0 28rpx;">产品介绍</view>
					<view class="pay_product-intro">
						<view class="crm_productbg1">
							<view class="crm_product_title">
								<view class="title1">查人脉</view>
								<view class="title2">联系搭建桥梁</view>
								<view class="title2">沟通决定成败</view>
							</view>
							<view class="crm_product_title2">
								<view class="zhong">产品优势</view>
								<view class="en">production advantage</view>
							</view>
						</view>
						<view class="crm_productbg2">
							<view class="crm_title">多渠道联系方式</view>
							<view class="crm_intro">
								缺少项目人联系方式，咨询沟通不到位“企业联系方式”助你打破僵局
							</view>
							<view class="crm_lxfs">
								<view class="crm_lxfs_title">在企业联系方式中，每家公司都有两种渠道联系</view>
								<view class="crm_lxfs_btn">
									<view class="btn1">企业招投标联系方式</view>
									<view class="btn1">企业工商联系方式</view>
								</view>
							</view>
						</view>
						<view class="crm_productbg3">
							<view class="crm_title">企业招投标联系方式</view>
							<view class="crm_intro1">
								联系方式缺乏时效性 企业联系方式任你选
							</view>
							<view class="crm_intro2">采招网企业招投标联系方式，整理历年招投标信息数据，提取公开信息中的招投标联系方式，保证电话真实性。</view>
						</view>
						<view class="crm_productbg4">
							<view class="crm_title">联系人经手项目</view>
							<view class="crm_intro">
								经大数据分析整理分类，将信息联系人与项目进行关联，联系人经手项目一目了然
							</view>
						</view>
						<view class="crm_cpjs_foot">APP功能逐渐完善中，完整版本功能请前往PC端体验</view>
					</view>
				</view>
			</view>
			<view class="pay_chaqiye" v-show="isshowqiye">
				<view class="pay_top">
					<view class="pay_top_box">
						<view class="pay_top_name">查企业</view>
						<view class="pay_top_intro">打破企业信息差</view>
						<view class="pay_top_number"><text class="number">1000</text>/家</view>
					</view>
				</view>
				<view class="pay_price">
					<view class="pay_price_left">
						<text class="text1">¥{{sjprice}}</text>
						<text class="text2" v-show="sjprice !== yuanjia">¥{{yuanjia}}</text>
					</view>
					<view class="pay_price_right">有效期至{{oneYearLater}}</view>
				</view>
				<view class="pay_item">
					<view class="pay_item-title">采招Saas应用</view>
					<view class="pay_item-label">
						<text class="label-btn active">查企业</text>
					</view>
				</view>
				<view class="pay_item">
					<view class="pay_item-title">其他应用服务</view>
					<view class="pay_item-label">
						<text class="label-btn" :class="isAddActive2 ? 'active' : '' "
							@click="clickService('2')">查人脉</text>
					</view>
				</view>
				<!-- 支付方式 -->
				<view class="infor_quanyi" v-if="!baseConfig.isIOSshenhe">
					<view class="payment">
						<radio-group @change="radioChange" class="payment_radio">
							<label class="pay-list-cell pay-list-cell-pd" v-for="(payment, index) in payments"
								:key="payment.value">
								<view>
									<image :src="payment.tupic" class="pay-tupic"></image>
									{{payment.name}}
								</view>
								<view style="margin-left: 20rpx;">
									<radio :value="payment.value" :checked="paymentItem.id == payment.value"
										:type="payment.value" color="#74df63" />
								</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="pay_product">
					<view class="pay_product-top">产品介绍</view>
					<view class="product-intro_chaqiye">
						<view class="intro_top">
							<view class="intro_top_left">
								<view class="intro_top_left-title">查企业</view>
								<view class="intro_top_left-text">打破企业信息差</view>
							</view>
							<image src='https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/cqy_product_top.png'
								class="intro_top_right"></image>
						</view>
						<view class="intro_title">
							<view class="intro_title_zh">产品优势</view>
							<view class="intro_title_en">PRODUCTION ADVANTAGE</view>
						</view>
						<view class="intro_box">
							<view class="intro_cell intro_cell_bg1">
								<view class="intro_cell_title">
									快速了解企业信息
								</view>
								<view class="intro_cell_body">
									基于政府公开等数据提供<text>公司查询,工商信息查询,企业查询,工商查询,立案信息</text>等相关信息查询，保证信息真实可靠。
								</view>
							</view>
							<view class="intro_cell intro_cell_bg2">
								<view class="intro_cell_title intro_cell_title_right">
									企业变化信息清晰知
								</view>
								<view class="intro_cell_body">
									<text>不定期更新企业变更信息</text>，并将企业信息更新内容强差异化。阅读理解更方便。<text>危险信息一眼探查</text>，实现广泛的商业安全需求。
								</view>
							</view>
							<view class="intro_cell intro_cell_bg3">
								<view class="intro_cell_title">
									独有工程信息
								</view>
								<view class="intro_cell_body">
									采招网收集该企业相关的<text>工程类信息，更准确，内容更详细</text>。
								</view>
							</view>
							<view class="intro_box_foot">小程序功能逐渐完善中，完整版本功能请前往PC端体验</view>
						</view>
					</view>
				</view>

			</view>
			<view class="pay_product" style="padding-top: 30rpx; padding-bottom: 160rpx;">
				<view class="pay_product-top">购买须知</view>
				<view class="goumaixuzhi">
					购买前请详细阅读“<text @click="yonghuxieyi">采招网用户协议</text>”，“<text
						@click="toMemberqy">采招网服务列表</text>”及“<text @click="openGmxz">购买须知</text>”
				</view>
			</view>
			<view class="qyxq-foot">
				<view class="qyxq-foot-item" @click="zaixiankefu">
					<image src="https://img.bidcenter.com.cn/uni/qiqing/foot-kefu.png"></image>
					<text>客服</text>
				</view>
				<view class="qyxq-foot-item2" @click="topay">
					立即购买 ¥<text>{{sjprice}}</text>
				</view>
			</view>

		</view>

		<!-- 服务协议弹窗 -->
		<buy-needknow :showBuyKnow.sync="showBuyKnow"></buy-needknow>

		<!-- 支付状态弹窗 -->
		<u-popup :show="showPayModal" mode="center" :closeOnClickOverlay="true" @close="close" @open="open" :closeable="true" border-radius="10">
			<view style="width:600rpx;">
				<h3 class="pay-popup-tit">支付遇到问题?</h3>
				<view style="padding:5% 10%;">支付完成前，请不要关闭该窗口，完成支付请根据您的情况点击下面的按钮</view>
				<view class="btnWrap">
					<view class="btn btnOver" @click="payConfirm">已完成支付</view>
					<view class="btn btnRepeat" @click="topay()">重新支付</view>
				</view>
			</view>
			
		</u-popup>

		<!-- 左滑返回挽留弹窗 -->
		<u-modal :show="showQuitPop" :content='quitContent' width="560rpx" :showCancelButton='true' confirmText="继续支付"
			cancelText="取消支付" confirm-color="#2f6dfe" @confirm="quitConfirm" @cancel="quitCancel"></u-modal>

		<!-- h5 支付页 -->
		<web-view :fullscreen="false" v-if="isUseH5Pay" :src="src" :webview-styles="webviewStyles"></web-view>

	</view>
</template>

<script>
	// import config from '@/common/config'
	export default {
		data() {
			return {
				webviewStyles:{
					// progress:{
					// 	color: '#f00'
					// },
					height:0,
					top:50,
					bottom:0
				},
				isUseH5Pay: false,
				src: '',
				loadingPageText: '正在加载...',
				showBuyKnow: false,
				isshowrenmai: true,
				isshowqiye: false,
				isAddActive1: false,
				isAddActive2: false,
				location: '11385',
				type: '254',
				etime: '',
				sjprice: 0,
				yuanjia: 0,
				title: '采招Sass应用',
				isPageLoading: true,
				jgid: [],
				billStr: [],
				callback: '',

				// 需要购买的月份
				needBuy: 1,
				youxiaoqi: '',
				payments: [{
						value: 'alipay',
						tupic: "/static/img/huiyuan/zhifubao.png",
						name: '支付宝支付'
					},
					{
						value: 'wxpay',
						name: '微信支付',
						tupic: "/static/img/huiyuan/weixin.png",
						checked: 'true'
					}
				],
				// 支付方式
				paymentItem: {
					id: 'alipay'
				},
				lockPayBtn: false,
				IAPOrders: [],
				iapnotifycount: 0,
				orderid: '',
				// 支付相关
				showPayModal: false,
				// 计划创建的webview
				// wv: '',

				showQuitPop: false,
				startX: 0, // 记录开始触摸点的X坐标
				lastX: 0, // 记录上一次触摸点的X坐标
				quitContent: '当前订单未完成支付，请尽快支付',

				//ios手机支付状态显示
				showPayModal: false,
				userInfo: uni.getStorageSync('userInfo') || {},
				isios: false,
			};
		},
		onLoad(option) {
			this.type = option.type
			const keyword2 = option.keywords2 ? option.keywords2 : ''
			if (option.pageurl == '/pages/qiqing/xinxibiangeng/index') {
				this.callback = '/pages/qiqing/xinxibiangeng/index?comcode=' + option.comcode + '&vcode=' + option.vcode +
					'&company=' + option.company
			} else {
				this.callback = '/pages/qiqing/index?comcode=' + option.comcode + '&vcode=' + option.vcode +
					'&companyName=' + option.companyName + '&type=' + option.danweiType + '&keywords2=' + keyword2
			}
			// console.log('pay',this.callback)
			if (this.type == '254') { //查企业
				this.isshowqiye = true
				this.isshowrenmai = false
			} else { //查人脉
				this.isshowrenmai = true
				this.isshowqiye = false
			}

			this.getPrice()
			// ios 审核期间走apple应用内 支付
			if (uni.getSystemInfoSync().platform == 'ios') {
				this.isios = true;
				if (this.baseConfig.isIOSshenhe) {
					// uni.switchTab({
					// 	url: '/pages/user/user'
					// })
					// return false;
					this.paymentItem.id = "appleiap";
				}
			}

			// #ifdef APP-PLUS
			// this.wv = plus.webview.create("", "bidcenter", {
			// 	// plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
			// 	// 'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
			// 	// top: uni.getSystemInfoSync().statusBarHeight +
			// 	// 	44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
			// 	top: '50',
			// 	bottom: 0,
			// 	height: 0
			// })
			// #endif
		},
		async onShow(options) {
			this.isUseH5Pay=false;
			// const me = this;
			// // 原因是:页面onshow优先级高于应用onshow  ios弹窗询问支付状态
			// if (this.isios && !this.baseConfig.isIOSshenhe) {
			// 	setTimeout(function() {
			// 		// 显示支付状态Popup
			// 		if (getApp().globalData.from === 'bidcenter.com.cn://' || me.showPayModal) {
			// 			me.showPayModal = true;
			// 		}

			// 	}, 300)
			// }
		},
		onBackPress(options) {
			if (this.baseConfig.isIOSshenhe) return

			/**
			 * options.form:
			 * 注：
			 * - 触发(ios,android)顶部导航返回按钮时，options.from是navigateBack
			 * - 触发android底部返回按钮，值是 backbutton；如果设置中 导航方式 设置为全面屏，则支持侧滑，且能触发onBackPress
			 * - iOS 端侧滑返回不会触发 onBackPress
			 * 
			 * 参考uni文档链接及https://juejin.cn/post/7097056545305722910链接
			 * 
			 */
			if (options.from) {
				this.showQuitPop = true;
				return true;
			}
		},
		computed: {
			// 支付方式是：鸿蒙且为微信支付
			isharmonyosWxpay() {
				return uni.getSystemInfoSync().platform === 'harmonyos' && this.paymentItem.id == "wxpay"
			},
			oneYearLater() {
				var currentTime = new Date()
				currentTime = currentTime.setFullYear(currentTime.getFullYear() + 1)
				currentTime = new Date(currentTime)
				var year = currentTime.getFullYear() + '/';
				var month = (currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime
					.getMonth() + 1) + '/';
				var date = (currentTime.getDate() < 10 ? '0' + (currentTime.getDate()) : currentTime.getDate());

				return year + month + date
			},
		},

		methods: {
			// 触摸开始事件
			onTouchStart(event) {
				this.startX = event.touches[0].pageX; // 获取触摸点的X坐标
			},
			// 触摸移动事件
			onTouchMove(event) {
				this.lastX = event.touches[0].pageX; // 获取上一次触摸点的X坐标
			},
			// 触摸结束事件
			onTouchEnd(event) {
				// 左滑，注：为了防止点击的手机侧滑完成后显示上一个页面时显示弹窗，添加 this.lastX>0的条件，即左边开始滑动的起点尽量保证在页面中
				if ((this.lastX - this.startX) > 0 && this.lastX > 10) { // 判断是否向左滑动，可以根据需要调整50的数值
					this.showQuitPop = true
				}
			},
			quitConfirm() {
				this.showQuitPop = false
				this.topay()
			},
			quitCancel() {
				this.showQuitPop = false
				// console.log(getCurrentPages())
				uni.redirectTo({
					url: this.callback ? decodeURIComponent(this
						.callback) : '/pages/user/user'
				})
			},
			/**
			 * 获取价格 20250326张家铭策划稿 app目前没有购买查企业，
			 * 查人脉区分pc、移动
			 * pc:types传255
			 * 移动获取一个月的价格：rmJson=[{"rmid":225,"unit":2,"num":1}]}]  unit:1(年) 2（月）  num是数量
			 * 移动计算剩余时间，不足一个月补足一个月，小于30天，点击支付直接通知客服跟进,如a客户移动会员到期还剩3个月零1天，则需要购买4个月的查人脉功能，当小于30天时显示最低一个月的价格，有效期显示为固定文字 1个月
			 */

			getPrice() {
				let arr = []
				let params = {}
				if (this.userInfo.hyJibie.includes('移动')) {
					arr = [{
						rmid: '255',
						unit: '2',
						num: '1'
					}]
				} else {
					arr = []
				}
				uni.$u.http
					.post('pay/GetPriceHandler.ashx', {
						location: this.location,
						types: this.type, // 查人脉(255),查企业（）254  
						rmJson: JSON.stringify(arr) //获取每月的查人脉价格，默认arr为空,当arr有值时，只会返回单月价格。只有移动端会员需要获取单月的价格，
					}).then(rs => {
						const data = rs || []
						//接口返回数据变动，所以需要将价格分类
						data.map((item) => {
							// danwei: 1->年  2->月
							if (item.danwei == 1 && item.danweinum == 1 && item.biaoshi == 1) {
								this.sjprice = item.sjprice
								this.yuanjia = item.yuanjia
								this.jgid = item.jgid
							}
						})

						this.isPageLoading = false

						//查企业-移动端根据时长自动调整价格，时长与可查看次数,toFixed（）为字符串，转为数值
						if (this.userInfo.hyJibie.includes('移动') && this.type == '255') {
							// debugger
							//剩余天数
							let shengyutianshu = this.surplusDays(this.userInfo.hyendtime)
							// console.log(shengyutianshu)
							// let shengyutianshu =this.surplusDays('2025/07/01')
							//需要购买几个月的会员
							let buyMonth = Math.round((shengyutianshu / 30))
							//剩余天数少于30天按一个月算
							if (shengyutianshu <= 30) {
								this.needBuy = 1
								buyMonth = 1
							}
							this.needBuy = buyMonth
							this.sjprice = data[0].sjprice * buyMonth
							this.yuanjia = (data[0].yuanjia * buyMonth).toFixed(1)
							this.jgid = data[0].jgid
							//有效期截止时间
							this.youxiaoqi = this.futureDate(buyMonth)
						}

						// let jgid = ''
						const arr = []
						this.jgid.map((item, index) => {
							// 如果是移动端会员购买查人迈,count数量需传购买月份的数量 20250327by帅帅
							if (this.userInfo.hyJibie.includes('移动') && this.type == '255') {
								arr.push({
									id: item,
									areacode: '',
									count: this.needBuy
								})
							} else {
								arr.push({
									id: item,
									areacode: '',
									count: 1
								})
							}
						})
						this.billStr = arr
						if (this.isios && this.baseConfig.isIOSshenhe) {
							this.plusReady()
						}
					}).catch(err => {
						console.log(err)
						uni.$u.toast(err.msg);
					})
			},
			//剩余天数
			surplusDays(value) {
				const now = new Date();
				const future = new Date(value);
				const index = (future - now) / 1000 / (60 * 60 * 24);
				const day = parseInt(index); // 天
				if (day < 0) {
					return -1;
				}
				return day + 1;
			},
			//有效期
			futureDate(n) {
				const current = new Date();
				current.setMonth(current.getMonth() + n); // 增加n个月
				return current.toISOString().slice(0, 10); // 格式为 YYYY-MM-DD
			},
			// 点击 立即开通按钮
			async requestPayment() {
				const me = this;
				// console.log('支付',this.isios,this.baseConfig.isIOSshenhe)
				uni.showLoading({
					title: '订单处理中...'
				});
				if (this.isios && this.baseConfig.isIOSshenhe) {
					this.paymentItem.id = "appleiap";
				}

				let orderInfo = await this.getOrderInfo();
				console.log('orderInfo', orderInfo)
				this.orderid = orderInfo.orderid || ''
				
				try{
					if ((uni.getSystemInfoSync().platform === 'android' && orderInfo.statusCode !== 200) || (this.isios && !this.baseConfig.isIOSshenhe && !
							orderInfo.orderid) || (this.isharmonyosWxpay && !orderInfo.orderid)) {
						uni.showModal({
							content: "获得订单信息失败",
							showCancel: false
						})
						uni.hideLoading()
						// 解锁
						this.lockPayBtn = false;
						return;
					}
				}catch(err){
					console.log('err',err)
				}
				

				// && this.baseConfig.isIOSshenhe
				if (this.isios || this.isharmonyosWxpay) {
					// 更新支付弹窗显示条件,重置为应用初始值
					// getApp().globalData.from = ''

					if (this.baseConfig.isIOSshenhe) {
						this.pay(orderInfo.data)
					} else {
						setTimeout(()=>{
							this.showPayModal=true;
						}, 5000);
						// 注：想唤起微信支付界面时，必须用网络地址；而支付宝及电脑端（只能唤醒微信，打开微信，不能支付）用上面的本地地址也可以
						const h5pay = 'https://m.bidcenter.com.cn/pay/pay-jsapi.html?orderid=' + orderInfo
							.orderid +
							'&token=' + this.initNewData().token + '&from=open'

						this.src = h5pay;
						this.isUseH5Pay = true;

						setTimeout(() => {
							uni.hideLoading()
							// 解锁
							this.lockPayBtn = false;
						}, 1000)
					}
					return
				} else {
					uni.requestPayment({
						provider: this.paymentItem.id,
						orderInfo: orderInfo.data,
						success: (e) => {
							// console.log("success", e);
							uni.$u.toast('支付成功');
							setTimeout(() => {
								uni.redirectTo({
									url: this.callback ? decodeURIComponent(this
										.callback + '&isgoumai=1') : '/pages/user/user'
								})
							}, 1000)
						},
						fail: (e) => {
							// console.log(e)
							uni.$u.toast('支付失败');
						},
						complete: () => {
							// 解锁
							this.lockPayBtn = false;
							uni.hideLoading()
						}
					})
					// 鸿蒙打开时：会先询问是否允许支付宝支付，如果不允许，需要执行以下代码才可结束loading
					setTimeout(() => {
						uni.hideLoading()
						// 解锁
						this.lockPayBtn = false;
					}, 5000)
				}

			},
			getOrderInfo() {
				let data = {};
				// let appid = "";
				// // #ifdef APP-PLUS
				// appid = plus.runtime.appid;
				// // #endif
				// console.log(111,JSON.stringify(this.billStr))
				// 正常来说，只有android中的接口会用到；苹果应用于支付不太清楚
				//分步买 callpay传1，安卓买传0 20250409
				if (this.isios && this.baseConfig.isIOSshenhe) {
					// 	// ios 审核内，统一下单接口
					data.payid = this.paymentItem.id; //wxpay：微信支付，alipay：支付宝支付，weworkpay：企业微信(小程序)
					data.billStr = JSON.stringify(this.billStr);
					data.callPay = 1; //默认0：是；1：否

				} else if (uni.getSystemInfoSync().platform === 'android' || (uni.getSystemInfoSync().platform ===
						'harmonyos' && this.paymentItem.id == "alipay")) {
					// android 统一下单接口
					data.payid = this.paymentItem.id; //wxpay：微信支付，alipay：支付宝支付，weworkpay：企业微信(小程序)
					data.billStr = JSON.stringify(this.billStr);
					data.callPay = 0; //默认0：是；1：否

				} else {
					data.payid = this.paymentItem.id; //wxpay：微信支付，alipay：支付宝支付，weworkpay：企业微信(小程序)
					data.billStr = JSON.stringify(this.billStr);
					data.callPay = 1; //默认0：是；1：否
				}
				data.qudao = getApp().globalData.channel;


				// console.log('ios',this.baseConfig.isIOSshenhe,data,this.paymentItem.id)
				return new Promise((res) => {
					uni.$u.http
						.post('pay/CreateOrderHandlerV3.ashx', data).then(rs => {
							// console.log(rs)
							res(rs)
						}).catch(err => {
							uni.$u.toast(err.msg);
						})
				})

			},
			//支付相关
			radioChange: function(evt) {
				//console.log(evt)
				// this.paymentItem.id = evt.target.value;
				this.paymentItem.id = evt.detail.value;
				this.lockPayBtn = false;
				uni.hideLoading()
			},

			plusReady() { //uni-app中将此function里的代码放入vue页面的onLoad生命周期中
				// 获取支付通道 
				let that = this;

				return new Promise((res) => {
					// console.log(1, res)

					// #ifdef APP-PLUS
					plus.payment.getChannels(function(channels) {
						for (var i = 0; i < channels.length; i++) {
							// console.log(channels)
							if (channels[i].id == 'appleiap') {
								iapChannel = channels[i];
								//console.log("进入方法appleiap " + that.IAPOrders)
								iapChannel.requestOrder(that.IAPOrders, function(event) {
									uni.hideLoading();
									console.log("获取支付通道成功")
									//console.log(JSON.stringify(event))
								}, function(errormsg) {
									uni.hideLoading();
								});
							}
						}
					}, function(e) {
						uni.showModal({
							content: "获取支付通道失败,请重新进入", //+ e.message,
							showCancel: false,
							success: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						});
						//console.log("获取支付通道失败：" + e.message);
					});
					// #endif

				})
			},
			async pay(e) {
				// console.log(e)
				let that = this;
				// console.log('e',iapChannel)
				uni.showLoading({
					title: '支付中，请稍后'
				});
				// setTimeout(()=>{
				// 	uni.hideLoading();
				// 	// 解锁
				// 	this.lockPayBtn = false;
				// }, 1000)
				plus.payment.request(iapChannel, {
					"productid": e.productid,
					"username": e.username,
					"quantity": e.quantity
				}, function(result) {

					// 解锁
					that.lockPayBtn = false;
					uni.hideLoading();

					if (result != undefined && result != null && result.transactionIdentifier !=
						undefined &&
						result.transactionIdentifier !=
						null && result.transactionReceipt != undefined && result
						.transactionReceipt != null) {
						//添加订单缓存，防止掉单
						uni.setStorageSync("iaporderinfo", result);
						uni.setStorageSync("iaporderinfolocal", e);

						//验证订单
						that.iapnotify(result, e, false);
					} else {
						uni.showToast({
							title: '未获取到订单信息！',
							icon: "none"
						});
					}
				}, function(e) {
					// console.log(e)
					// 解锁
					that.lockPayBtn = false;
					uni.hideLoading();

					uni.showModal({
						content: "下单失败，请重试", //+ JSON.stringify(e),
						showCancel: false
					});
				});
			},
			iapnotify(result, order, ischeck) {
				let that = this;
				let data = this.initNewData();
				data.location = 5181;
				data.orderid = order.orderid;
				//console.log("支付回调方法");
				data.transactionid = result.transactionIdentifier;
				data.receipt = result.transactionReceipt;
				data.payment = JSON.stringify(result.payment);
				uni.request({
					url: this.baseConfig.serverURL +
						'pay/iap/IosiapNotifyHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								//移除订单缓存
								try {
									uni.removeStorage({
										key: 'iaporderinfo',
										success: function(res) {
											//console.log('iaporderinfo remove success');
										}
									});
									uni.removeStorage({
										key: 'iaporderinfolocal',
										success: function(res) {
											//console.log('iaporderinfolocal remove success');
										}
									});
								} catch (e) {}

								if (!ischeck) {
									uni.showToast({
										title: res.data.msg,
										success: function() {
											setTimeout(function() {
												uni.navigateBack({
													delta: 1
												});
											}, 2000)
										}
									})
								}
							}
						} else {
							uni.showToast({
								title: '购买失败！',
								icon: "none"
							});
						}
					},
					fail: (e) => {
						that.iapnotifycount++;
						if (that.iapnotifycount < 5) {
							that.iapnotify(result, order, false)
						} else {
							uni.showToast({
								title: '购买失败，可能网络超时！',
								icon: "none"
							});
						}

					}
				})

			},
			open() {
				this.showPayModal = true;
			},
			close() {
				this.showPayModal = false;
				// getApp().globalData.from = 'isclose'
				this.showPayModal = false
			},
			// 已完成支付
			payConfirm() {
				// 确认支付结果
				this.getPayState();
			},
			// 获取支付状态
			getPayState() {
				let data = this.initNewData();
				data.location = this.location;
				data.type = "1" // 支付类别	string	Y	0（默认）：二码合一扫码支付 1：直接支付
				data.orderid = this.orderid //
				uni.request({
					url: this.baseConfig.serverURL + '/pay/GetPaySuccessToCecheHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						// console.log(22,res)
						if (res.data.ret) {
							this.close()
							uni.$u.toast('支付成功');
							this.showPayModal = false
							setTimeout(() => {
								uni.redirectTo({
									url: this.callback ? decodeURIComponent(this
										.callback + '&isgoumai=1') : '/pages/user/user'
								})
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							});
						}
					},
					fail: (e) => {
						uni.showToast({
							title: '服务器异常',
							icon: "none"
						});
					}
				})
			},
			topay() {

				//移动计算剩余时间，不足一个月补足一个月，小于30天，点击支付直接通知客服跟进
				if (this.userInfo.hyJibie.includes('移动') && this.type == '255' && this.needBuy == 1) {
					uni.$u.http
						.post('/wxapp/WxAppFuFeiSendMsgHandler.ashx', {
							location: this.location,
							ctid: '10917', // 9344为续费申请 9347为会员升级 9348为会员开通 10917是会员但查看次数已用尽
						}).then(rs => {
							setTimeout(() => {
								uni.$u.toast('稍后客服联系您，请注意来电');

							}, 100)
							setTimeout(() => {
								uni.redirectTo({
									url: this.callback ? decodeURIComponent(this
										.callback + '&isgoumai=1') : '/pages/user/user'
								})
							}, 2000)
						}).catch(err => {
							uni.$u.toast(err.msg);
						})
				} else {
					if (this.lockPayBtn) return;
					this.lockPayBtn = true;
					this.requestPayment()
				}

			},
			yonghuxieyi() {
				uni.navigateTo({
					url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/fwtk.shtml&title=用户协议"
				})
			},
			toMemberqy() {
				uni.navigateTo({
					url: '/pages/user/memberQuanyi/memberQuanyi'
				})
			},
			openGmxz() {
				this.showBuyKnow = true
			},
			clickService(data) {
				if (data == '1') {
					this.isAddActive1 = !this.isAddActive1

				} else if (data == '2') {
					this.isAddActive2 = !this.isAddActive2
				}
				if (this.isAddActive1 || this.isAddActive2) {
					this.type = '255+254'
					this.getPrice()
				} else {
					if (!this.isAddActive1 && this.isshowrenmai) {
						this.type = '255'
						this.getPrice()
					} else {
						this.type = '254'
						this.getPrice()
					}
				}
			},
			// 在线客服
			zaixiankefu() {
				const zaixiankefu = this.lianxifangshi.ZaiXianBuMen
				wx.openCustomerServiceChat({
					extInfo: {
						url: zaixiankefu
					},
					corpId: 'ww1c379f23e62a624b',
					showMessageCard: true,
					sendMessageTitle: '会员业务开通',
					sendMessageImg: 'https://img.bidcenter.com.cn/uni/share.png',
					success(res) {

					},
					fail(err) {}
				})
				uni.$u.http
					.post('/wxapp/WxAppFuFeiSendMsgHandler.ashx', {
						location: this.location,
						ctid: '9348', // 9344为续费申请 9347为会员升级 9348为会员开通
					}).then(rs => {

					}).catch(err => {
						uni.$u.toast(err.msg);
					})
			}
		}
	}
</script>

<style lang="scss">
	.pay_container {
		height: 100%;
	}

	.pay_top {
		background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/topbg.png') no-repeat center top;
		width: 100%;
		height: 334rpx;
		background-size: 100% 100%;

		.pay_top_box {
			padding-top: 80rpx;
			padding-left: 60rpx;
		}

		&_name {
			font-weight: bold;
			font-size: 36rpx;
		}

		&_intro {
			font-size: 28rpx;
			color: #606266;
			margin: 10rpx 0;
		}

		&_number {
			color: #606266;
			font-size: 28rpx;
			font-weight: bold;

			.number {
				font-size: 48rpx;
				color: #FE2B2B;
			}
		}
	}

	.pay_price {
		padding: 30rpx 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_left {
			.text1 {
				font-size: 36rpx;
				color: #FF1717;
				font-weight: bold;
			}

			.text2 {
				font-size: 24rpx;
				color: #6C717E;
				margin-left: 20rpx;
				text-decoration: line-through;
			}
		}

		&_right {
			font-size: 24rpx;
			color: #6C717E;
		}
	}

	.pay_item {
		padding: 0 28rpx 30rpx;

		&-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #3B3E45;
		}

		&-label {
			margin-top: 20rpx;
			display: flex;

			.label-btn {
				height: 68rpx;
				line-height: 68rpx;
				border-radius: 10rpx;
				border: 1rpx solid #2F6DFE;
				font-weight: bold;
				font-size: 28rpx;
				color: #2F6DFE;
				width: 218rpx;
				text-align: center;
				display: block;

				&.active {
					background-color: #2F6DFE;
					color: #fff;
				}
			}
		}

	}

	.pay_product {
		padding: 0 28rpx;

		&-top {
			font-weight: bold;
			font-size: 28rpx;
			color: #3B3E45;
			margin-bottom: 20rpx;
		}
	}

	.pay_gmxz {
		padding: 0 28rpx;

	}

	.goumaixuzhi {
		font-size: 24rpx;
		color: #6C717E;

		text {
			color: #2F6DFE;
		}
	}

	.qyxq-foot {
		position: fixed;
		bottom: 0;
		padding: 25rpx 28rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #EEEEEE;
		background-color: #fff;
		z-index: 9;
		box-sizing: border-box;

		.qyxq-foot-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 20rpx;
			white-space: nowrap;

			image {
				width: 40rpx;
				height: 40rpx;
				display: block;
			}

			text {
				font-size: 28rpx;
				color: #6C717E;
				margin-top: 8rpx;
			}

			button {
				border: 0;
				background: transparent !important;
				padding: 0;
				line-height: initial;
				display: flex;
				flex-direction: column;
				align-items: center;

				&::after {
					border: initial;
				}
			}
		}

		.qyxq-foot-item2 {
			height: 80rpx;
			border-radius: 10rpx;
			line-height: 80rpx;
			font-weight: bold;
			font-size: 28rpx;
			background: #FE6B2F;
			margin-left: 20rpx;
			color: #FFFFFF;
			width: 554rpx;
			text-align: center;
		}
	}

	.product_img {
		width: 694rpx;
		height: 175rpx;
		display: block;
		vertical-align: top;
	}

	.product_img_last {
		width: 694rpx;
		height: 126rpx;
		display: block;
		vertical-align: top;
	}

	.product-intro_chaqiye {
		background: linear-gradient(180deg, #F4F9FF 0%, #89B7FF 100%);
	}

	.intro_top {
		padding: 26rpx 8rpx 69rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&_left {
			&-title {
				font-size: 60rpx;
				color: #3D4351;
				margin-bottom: 30rpx;
			}

			&-text {
				font-size: 28rpx;
				color: #606266;
			}
		}

		&_right {
			width: 418rpx;
			height: 268rpx;
		}
	}

	.intro_title {
		text-align: center;

		&_zh {
			font-size: 48rpx;
			color: #3D4351;
			margin-bottom: 10rpx;
		}

		&_en {
			font-size: 24rpx;
			color: #3D4351;
		}
	}

	.intro_box {
		margin: 40rpx 30rpx 0;

		.intro_cell {
			margin-bottom: 18rpx;

			&_title {
				font-size: 36rpx;
				color: #3B3E45;
				padding: 49rpx 42rpx 35rpx;
			}

			&_body {
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 0 42rpx;

				text {
					color: #2F6DFE;
				}
			}

			&_title_right {
				text-align: right;
			}
		}

		.intro_cell_bg1 {
			background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/cqy_product01.png') no-repeat;
			width: 635rpx;
			height: 288rpx;
			background-size: 100%;
		}

		.intro_cell_bg2 {
			background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/cqy_product02.png') no-repeat;
			width: 635rpx;
			height: 288rpx;
			background-size: 100%;
		}

		.intro_cell_bg3 {
			background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/cqy_product03.png') no-repeat;
			width: 635rpx;
			height: 288rpx;
			background-size: 100%;
		}

		.intro_box_foot {
			font-size: 22rpx;
			color: #FFFFFF;
			padding: 28rpx 0 35rpx;
		}
	}

	.pay_chaqiye .pay_top {
		background: url(https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/topbg_cqy.png) no-repeat center top;
		width: 100%;
		height: 334rpx;
		background-size: 100% 100%;
	}

	.crm_productbg1 {
		background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/crm_cpjsbg1.png') no-repeat;
		width: 100%;
		height: 427rpx;
		background-size: 100% 100%;
	}

	.crm_product_title {
		padding: 65rpx 0 0 95rpx;

		.title1 {
			font-size: 60rpx;
			color: #3D4351;
			margin-bottom: 20rpx;
		}

		.title2 {
			font-size: 28rpx;
			color: #606266;
			padding-bottom: 10rpx;
		}
	}

	.crm_product_title2 {
		padding-top: 55rpx;
		text-align: center;

		.zhong {
			font-size: 48rpx;
			color: #3D4351;
		}

		.en {
			font-size: 24rpx;
			color: #3D4351;
			text-transform: uppercase;
		}
	}

	.crm_productbg2 {
		background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/crm_cpjsbg2.png') no-repeat;
		width: 100%;
		height: 562rpx;
		background-size: 100% 100%;

		.crm_title {
			font-size: 36rpx;
			color: #FFFFFF;
			padding: 30rpx 0 0 145rpx;
		}

		.crm_intro {
			width: 230rpx;
			margin: 100rpx 86rpx;
			font-size: 28rpx;
		}

		.crm_lxfs {
			text-align: center;

			&_title {
				font-size: 24rpx;
			}

			&_btn {
				display: flex;
				justify-content: center;
				margin-top: 20rpx;

				.btn1 {
					width: 276rpx;
					height: 58rpx;
					background: linear-gradient(104deg, #A0CDFF 0%, #437EFE 100%);
					border-radius: 29rpx;
					line-height: 58rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
					margin: 0 10rpx;
				}
			}
		}
	}

	.crm_productbg3 {
		background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/crm_cpjsbg3.png') no-repeat;
		width: 100%;
		height: 569rpx;
		background-size: 100% 100%;

		.crm_title {
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: right;
			padding-top: 36rpx;
			padding-right: 150rpx;
		}

		.crm_intro1 {
			font-size: 28rpx;
			color: #3D4351;
			width: 250rpx;
			margin-left: 405rpx;
			margin-top: 180rpx;
			line-height: 40rpx;
		}

		.crm_intro2 {
			font-size: 24rpx;
			margin-left: 86rpx;
			margin-top: 60rpx;
			margin-right: 86rpx;
		}
	}

	.crm_productbg4 {
		background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/crm_cpjsbg4.png') no-repeat;
		width: 100%;
		height: 569rpx;
		background-size: 100% 100%;

		.crm_title {
			font-size: 36rpx;
			color: #FFFFFF;
			padding-top: 28rpx;
			padding-left: 150rpx;
		}

		.crm_intro {
			font-size: 24rpx;
			margin: 360rpx 86rpx 0;
		}
	}

	.crm_cpjs_foot {
		background: url('https://img.bidcenter.com.cn/uni/qiqing/caizhaoyingyong/crm_cpjsbg5.png') no-repeat;
		width: 100%;
		height: 60rpx;
		background-size: 100% 100%;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-left: 58rpx;
		box-sizing: border-box;
	}

	.infor_quanyi {
		margin: 0 30rpx 140rpx;
		// margin-top: 15rpx;
		background-color: #FFFFFF;
	}

	.payment {
		display: flex;
		flex-direction: column;
		padding: 39rpx 0;

		.payment_radio {
			flex-direction: column;
			display: flex;
			// margin: 0 15px;

			.pay-list-cell {
				flex-direction: row;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				font-size: 32rpx;
				// margin-bottom: 30rpx;
				padding-bottom: 28rpx;

				&:last-child {
					padding: 0;
				}
			}
		}

		.pay-tupic {
			width: 55rpx;
			height: 54rpx;
			vertical-align: middle;
			margin-right: 20rpx;
		}
	}

	.discountBox {
		// margin: 0 30rpx 0;
		margin-bottom: 42rpx;

		.discount {
			display: flex;
			align-items: center;

			h2 {
				font-size: 30rpx;
				margin-left: 16rpx;
				font-weight: 500;
			}
		}

		.discountInfo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-top: 43rpx;
			padding: 40rpx 21rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 1px solid #C5C5C5;
			font-size: 30rpx;

			image {
				width: 48rpx;
				height: 33rpx;
				margin-right: 20rpx;
			}

			.jianmian {
				color: #F24949;
				font-weight: bold;
				font-size: 28rpx;
				// margin-left: 175rpx;
			}

			.jianmian2 {
				color: #BFBFBF;
				font-weight: bold;
				font-size: 36rpx;
			}
		}
	}

	.pay-popup-tit {
		padding: 21px 0 0px;
		text-align: center;
	}

	.invisible {
		visibility: hidden;
	}

	.btnWrap {
		display: flex;
		justify-content: center;
		padding-bottom: 50rpx;

		.btn {
			width: 234rpx;
			white-space: nowrap;
			background-color: #f4f5f7;
			text-align: center;
			padding: 2% 0;
			color: #868789;
			border-radius: 7rpx;

			&:first-child {
				background-color: #304aff;
				margin-right: 8%;
				color: #fff;

			}
		}
	}
</style>